<template>
  <div class="mod-config">
    <el-button type="danger" @click="multiDelete()" :disabled="selectionList.length <= 0">批量删除</el-button>
    <el-table
      border
      :data="dataList"
      @selection-change="onSelectionChanged"
      style="width: 100%;marginTop: 20px;"
      v-loading="loading"
    >
      <el-table-column align="center" type="selection" />
      <el-table-column align="center" type="index" width="80" label="序号" />
      <el-table-column prop="realname" align="center" width="150" label="真实姓名" />
      <el-table-column prop="gender" align="center" width="100" label="性别">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.gender==1">男</el-tag>
          <el-tag v-else-if="scope.row.gender==2">女</el-tag>
          <el-tag v-else>未知</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="mobile" align="center" width="200" label="手机号" />
      <el-table-column prop="deptName" align="center" width="150" label="部门" />
      <el-table-column prop="duty" align="center" width="150" label="职务" />
      <el-table-column prop="identityCard" align="center" width="200" label="证件号" />
      <el-table-column prop="birthday" align="center" width="200" label="出生日期" />
      <el-table-column prop="education" align="center" width="200" label="学历" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="recovery(scope.row.userId,scope.row.realname)">恢复人员</el-button>
          <el-button type="text" @click="deleteById(scope.row.userId,scope.row.realname)">彻底删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @current-change="loadDataList"
      :current-page.sync="pageIndex"
      :total="totalPage"
      layout="total, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectionList: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      loading: false
    }
  },
  mounted() {
    this.loadDataList()
  },
  methods: {
    onSelectionChanged(val) {
      this.selectionList = val
    },
    onPageSizeChange(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.loadDataList()
    },
    // 获取数据列表
    async loadDataList() {
      this.loading = true
      let res = await this.$http({
        url: this.$http.adornUrl('/usercenter-admin/user/deleteList'),
        method: 'post',
        data: {
          page: this.pageIndex,
          limit: this.pageSize
        }
      })

      if (res.code === 200) {
        this.dataList = res.data.list
        this.totalPage = res.data.totalCount
      } else {
        this.$notify.error({ title: '加载人员恢复列表失败，请重试！' })
      }
      this.loading = false
    },
    async recovery(id, realname) {
      let confirm = await this.$confirm(
        `您确认恢复人员“${realname}”吗？`,
        '提示',
        {
          cancelButtonText: '取消',
          confirmButtonText: '确认'
        }
      )
      if (confirm !== 'confirm') return

      let res = await this.$http({
        method: 'post',
        url: this.$http.adornUrl('/usercenter-admin/user/recover'),
        data: { userId: id }
      })

      if (res && res.code === 200) {
        this.$notify.success({
          title: '成功',
          message: `人员${realname}恢复成功`
        })
        this.pageIndex > 1 && this.dataList.length <= 1 && this.pageIndex--
        this.loadDataList()
        this.$store.dispatch('user/loadAlertListCount')
      } else {
        this.$notify.error({ title: '错误', message: res.msg })
      }
    },
    async multiDelete() {
      let idList = this.selectionList.map(x => x.userId)
      if (idList.length <= 0) {
        this.$notify.warning({ title: '提示', message: '没有选中任何项' })
        return
      }

      let confirm = await this.$prompt(
        `删除用户后将清除其所有相关信息，您确认要批量删除用户吗，请输入DEL确认您的操作？`,
        '提示',
        {
          cancelButtonText: '取消',
          confirmButtonText: '确认',
          inputPattern: /^del$/i,
          inputErrorMessage: '请输入DEL确认您的操作'
        }
      )
      if (confirm.action !== 'confirm') return
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.7)'
      })
      var res = await this.$http({
        method: 'post',
        url: '/usercenter-admin/user/deleteUserAllInfo',
        data: { userIds: idList.join(','), del: confirm.value }
      })

      if (res && res.code === 200) {
        this.$notify.success({
          title: '成功',
          message: `人员批量删除成功`
        })
        this.pageIndex = 1
        this.loadDataList()
      } else {
        this.$notify.error({ title: '错误', message: res.msg })
      }
      loading.close()
    },
    // 删除
    async deleteById(id, realname) {
      let confirm = await this.$prompt(
        `删除用户后将清除其所有相关信息，您确认要删除用户”${realname}“吗，请输入DEL确认您的操作？`,
        '提示',
        {
          cancelButtonText: '取消',
          confirmButtonText: '确认',
          inputPattern: /^del$/i,
          inputErrorMessage: '请输入DEL确认您的操作'
        }
      )
      if (confirm.action !== 'confirm') return

      let res = await this.$http.post(
        '/usercenter-admin/user/deleteUserAllInfo',
        {
          userIds: id,
          del: confirm.value
        }
      )

      if (res && res.code === 200) {
        this.$notify.success({
          title: '成功',
          message: `人员${realname}删除成功`
        })
        this.pageIndex > 1 && this.dataList.length <= 1 && this.pageIndex--
        this.loadDataList()
      } else {
        this.$notify.error({ title: '错误', message: res.msg })
      }
    }
  }
}
</script>
